<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../script/jquery-1.10.min.js"></script>
    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
</head>
<style>
    .div1 {
        width: 200px;
        border: 1px solid #8c8c8c;
    }
</style>
<script>
    window.onload = function () {
        //todo 获取设置  style
        var d = $("#div1");
        d.attr("class", "div1");
        console.log(d.attr("style"));
        console.log("attr 获取class:" + d.attr("class"));
        // 非行间样式
        d.css("width", "300px");
        console.log(d.css("width"));
        d.css("border", "2px solid");
        console.log(d.css("border"));

        //添加删除某style
        d.removeProp("width");
        console.log("使用prop 获取样式" + d.prop("style"));

        //todo 获取设置class
        d.removeClass("div1")
        console.log("这里没有class:" + d.prop("class"));
        d.addClass("div1");
        console.log("这里应该有class: div1" + d.prop("class"));


        //todo 获取设置text
        var d = $("#btn1");
        d.text("这是修改过的按钮");
        console.log(d.text());

        //todo 获取设置val
        var d = $("#input1")
        d.val("填充内容");
        console.log(d.val());

        //todo 获取设置 checkbox
        var d = $("input:checkbox");
        d.prop("checked", true); // 推荐prop
        console.log(d.prop("checked"));
//        d.attr("checked",false);
//        console.log(d.attr("checked"));

        // todo 设置readOnly 属性
        $("#abc").prop("readOnly", true) // 没有 abc,演示
    }
</script>
<body>


<div id="div1" style="height: 200px"></div>

<div id="btn1" class="btn btn-success" style="margin: 10px">这是默认按钮</div>
<input id="input1" class="text-center" type="text" placeholder="please input text"><br>

<div class="checkbox">
    <label><input type="checkbox" value="">Option 1</label>
    <!--横向-->
    <!--<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label> -->
</div>
</body>
</html>